<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Diamonds</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        img {
            vertical-align: middle;
            background-color: lightpink;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .clear_float::before,
        .clear_float::after {
            content: "";
            display: table;
        }

        .clear_float::after {
            clear: both;
        }

        .diamonds {
            max-width: 1440px;
            min-width: 1120px;
            margin: 0px auto;
        }

        .diamonds > .content,
        .diamonds > .footer{
            width: 88.88889%;
            margin: 0 auto;
        }
    </style>

    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/index.css">

    <script type="text/javascript">
        window.onResizeFuntionList = [];
        window.onresize = function () {
            for(let i in window.onResizeFuntionList){
                let temp = window.onResizeFuntionList[i];
                if(typeof(temp) === "function"){
                    temp();
                }
            }
        }
        window.getNumber = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) ) + min;
        }
    </script>

</head>
<body>
    <div class="diamonds" id="diamonds">
        <script type="text/javascript" src="../js/header.js"></script>

        <div class="content">
            <a href="product.html">
                <img src="../resource/images/hot_products.webp" alt="" class="hot_products">
            </a>

            <div class="recommend clear_float">
                <div class="left">
                    <a href="product.html"><img src="../resource/images/recommend_left.webp" alt=""></a>
                    <h2>HEATHERED 4-WAY STRETCH FABRIC</h2>
                    <p>
                        Buttery-soft performance stretch knit that allows you to always be on the move.
                    </p>
                    <div>
                        <a href="product.html">SHOP CORE PERFORMANCE&reg; HOODIE</a>
                    </div>
                </div>
                <div class="right">
                    <a href="product.html"><img src="../resource/images/recommend_right.webp" alt=""></a>
                    <h2>FROM WORKOUTS TO WORKING FROM HOME</h2>
                    <p>
                        These lightweight joggers feel soft against your skin and are naturally breathable with each and every movement.
                    </p>
                    <div>
                        <a href="product.html">SHOP CORE PERFORMANCE&reg; JOGGER</a>
                    </div>
                </div>
            </div>

            <div class="new_arrivals">
                <h2 class="title">NEW ARRIVALS</h2>
                <div class="split_line_container">
                    <div class="custom_split_line"></div>
                </div>
                <div class="new_arrivals_scroll" id="new_arrivals_scroll">
                    <div class="container clear_float" id="new_arrivals_scroll_container">
                        <!--由js填充内容，以下为模板-->
<!--                        <div class="content">-->
<!--                            <div>-->
<!--                                <a href="#">--> b
<!--                                    <div class="image_container">-->
<!--                                        <img src="../resource/images/new_arrivals_0_0.webp" alt="" class="image">-->
<!--                                        <img src="" alt="" class="image_hover">-->
<!--                                    </div>-->
<!--                                </a>-->
<!--                                <div class="split_line_container">-->
<!--                                    <div class="custom_split_line"></div>-->
<!--                                </div>-->
<!--                                <div class="product_name">-->
<!--                                    <a href="#">dddddddddddddddd</a>-->
<!--                                </div>-->
<!--                                <h4 class="price">$100</h4>-->
<!--                                <div class="styles">-->
<!--                                    <input type="radio" name="product_style" checked="checked">-->
<!--                                    <input type="radio" name="product_style">-->
<!--                                    <input type="radio" name="product_style">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <div class="to_left" onclick="handleNewArrivalsToLeft()">
                        <img src="../resource/images/index_left_arrow.png" alt="">
                    </div>
                    <div class="to_right" onclick="handleNewArrivalsToRight()">
                        <img src="../resource/images/index_right_arrow.png" alt="">
                    </div>
                </div>
            </div>

            <div class="shop_new_arrivals">
                <div class="title">
                    <a href="product_type.html">SHOP NEW ARRIVALS</a>
                </div>
                <a href="product_type.html" class="banner"><img src="../resource/images/index_shop_new_arrivals_banner.webp" alt=""></a>
            </div>

            <div class="recommend clear_float">
                <div class="left">
                    <a href="product_type.html"><img src="../resource/images/recommend1_left.webp" alt=""></a>
                    <h2>HNO LIMIT, NO BOUNDARIES</h2>
                    <p>
                        These 4-way stretch pants are uniquely designed with revolutionary
                        Luxseam&reg; fabric to provide style, comfort and performance.
                    </p>
                    <div>
                        <a href="product_type.html">SHOP INFINITY&reg; PANTS</a>
                    </div>
                </div>
                <div class="right">
                    <a href="product_type.html"><img src="../resource/images/recommend1_right.webp" alt=""></a>
                    <h2>ADVANCED LUXSEAM&reg; TECHNOLOGY</h2>
                    <p>
                        Engineered seamless technology for easy movement and the best tailored fit.
                    </p>
                    <div>
                        <a href="product_type.html">SHOP INFINITY&reg; SHIRTS</a>
                    </div>
                </div>
            </div>

            <div class="category clear_float">
                <div class="container">
                    <div class="item">
                        <img src="../resource/images/index_category_item1.webp" alt="">
                        <a href="product_type.html">SHOP HATS</a>
                    </div>
                </div>
                <div class="container">
                    <div class="item">
                        <img src="../resource/images/index_category_item2.webp" alt="">
                        <a href="product_type.html">SHOP SWEATER FLANNELS</a>
                    </div>
                </div>
                <div class="container">
                    <div class="item">
                        <img src="../resource/images/index_category_item3.webp" alt="">
                        <a href="product_type.html">SHOP SHORTS</a>
                    </div>
                </div>
            </div>

            <div class="follow_us">
                <a href="#" class="title">FOLLOW US</a>
                <div class="split_line"></div>
                <div class="follow_us_scroll">
                    <div>
                        <div class="container clear_float" id="follow_us_scroll_container">
                            <!--由js填充内容，以下为模板-->
<!--                            <div class="content">-->
<!--                                <div>-->
<!--                                    <img src="../resource/images/index_follow_us_0.jpg" alt="" class="image">-->
<!--                                    <div class="mask">-->
<!--                                        <img src="../resource/images/instagram_white.png" alt="">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="to_left">
                        <img src="../resource/images/index_left_arrow.png" alt="">
                    </div>
                    <div class="to_right">
                        <img src="../resource/images/index_right_arrow.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="../js/index.js"></script>
        <script type="text/javascript" src="../js/footer.js"></script>
    </div>
</body>
</html>
